<template>
	<view class="page">
		<!-- 顶部区域 -->
		<view class="header-fixed">
			<status-bar></status-bar>
			<view class="header-content">
				<view class="title">老八秘制小厨房</view>
				<view class="subtitle">小白学做菜</view>
			</view>
		</view>

		<!-- 搜索栏 -->
		<home-search />

		<!-- 轮播图、导航等模块 -->
		<swiper-content />
		<home-navigators />

	<!-- 推荐菜谱 -->
	<view class="recommend-section">
		<view class="section-title">推荐菜谱</view>
		<view class="dish-grid">
			<view v-for="item in recommendList" :key="item._id" class="dish-item" @click="goToDetail(item)">
				<image :src="item.imagePath" class="dish-img" mode="aspectFill" />
				<view class="dish-info">
					<text class="dish-name">{{ item.name }}</text>
					<view class="dish-meta">
						<text class="dish-grade">⭐ {{ item.grade }} 分</text>
						<view class="dish-stats">
							<text class="stat-item">👁 {{ formatCount(item.browseCount) }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script setup>
	import {
		getRecommend
	} from '../../api/homeApi'
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const recommendList = ref([])

	onLoad(async () => {
		await loadData()
	})

	const loadData = async () => {
		try {
			const res = await getRecommend()
			if (res.code === 200) {
				recommendList.value = res.data
				console.log('首页推荐', res.data)
			}
		} catch (err) {
			console.error('加载推荐失败', err)
		}
	}

	// 跳转到菜谱详情
	const goToDetail = (item) => {
		// TODO: 跳转到详情页
		uni.showToast({
			title: `点击了 ${item.name}`,
			icon: 'none'
		})
	}

	// 格式化数字显示
	const formatCount = (count) => {
		if (!count) return 0
		if (count > 10000) {
			return (count / 10000).toFixed(1) + 'w'
		}
		return count
	}
</script>

<style lang="scss">
	.page {
		background-color: #f9f9f9;
		min-height: 100vh;
	}

	/* 顶部背景区块 */
	.header-fixed {
		background: linear-gradient(180deg, #ffb43b 0%, #ff9f0a 100%);
		border-bottom-left-radius: 32rpx;
		border-bottom-right-radius: 32rpx;
		padding-bottom: 80rpx;
		color: #fff;
		text-align: left;

		.header-content {
			padding: 60rpx 32rpx 0;

			.title {
				font-size: 42rpx;
				font-weight: 700;
			}

			.subtitle {
				font-size: 26rpx;
				opacity: 0.9;
			}
		}
	}

	/* 推荐菜谱区块 */
	.recommend-section {
		padding: 24rpx;

		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}

		.dish-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 20rpx;
		}

		.dish-item {
			background-color: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);

			.dish-img {
				width: 100%;
				height: 240rpx;
			}

			.dish-info {
				padding: 16rpx;

				.dish-name {
					font-size: 28rpx;
					color: #333;
					font-weight: 600;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
					line-height: 1.4;
					height: 78rpx;
				}

				.dish-meta {
					margin-top: 8rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.dish-grade {
						font-size: 24rpx;
						color: #ff9500;
					}

					.dish-stats {
						display: flex;
						align-items: center;

						.stat-item {
							font-size: 22rpx;
							color: #999;
							margin-left: 8rpx;
						}
					}
				}
			}
		}
	}
</style>